<template>
  <div class="table__container">
    <table ref="table">
      <thead class="thead">
        <tr>
          <th v-for="(item, index) in tableTitle" :key="index" class="item__title" :class="'item__title--' + index ">
            {{item}}
          </th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr v-for="(row, index) in tableData.list" :key="index" ref="row">
          <td class="cell__box" v-for="(cell, i) in row" :key="i">
            {{cell.value}}
          </td>
          <td class="operate__text" v-if="tableData.operate">
            <span @click='rowOperate(index)'>
              {{tableData.operate.name}}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'a-table',
  props: {
    tableTitle: {
      required: true,
      type: Array,
    },
    tableData: {
      type: Object,
    },
  },
  methods: {
    rowOperate(val) {
      this.$emit('operate', val);
    }
  }
}
</script>
<style lang="stylus" scoped>
table
  width 100%
  border-collapse:collapse;
  text-align center
.thead
  background #aaa
  color #ffffff
  tr 
    height 40px
.tbody
  background #eee
  tr
    height 40px
.operate__text
  color red
  cursor pointer
</style>
